<template>
	<view class="m-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
		<slot name="desc" :element="rowInfo">
		</slot>
		<block v-if="!$slots.default && !$slots.$default">
			<scroll-view class="m-dropdown-item__scroll" scroll-y="true" :style="{
				height: uni.$utils.addUnit(height)
			}">
				<view class="m-dropdown-item__options">
					<up-cell-group>
						<up-cell v-for="(item, index) in options" :key="index"
							@click="cellClick(item[format.value],item)" :arrow="false" :title="item[format.label]"
							:title-style="{
							color: modelValue == item[format.value] ? activeColor : inactiveColor
						}">
							<up-icon v-if="modelValue == item[format.value]" name="checkbox-mark" :color="activeColor"
								size="32"></up-icon>
						</up-cell>
					</up-cell-group>
				</view>
			</scroll-view>
			<view style="background-color: #fff;padding: 4px 10px;">
				<slot name="defaultBtn">
					<button @tap="resetBtn">重置</button>
				</slot>
			</view>
		</block>
		<slot v-else />
	</view>
</template>

<script setup lang="ts" name="m-dropdown-item">
	import { ref, computed, onMounted, getCurrentInstance, watch } from 'vue';

	const props = defineProps({
		// #ifdef VUE3
		// 当前选中项的value值
		modelValue: {
			type: [Number, String, Array],
			default: ''
		},
		// #endif
		// #ifdef VUE2
		// 当前选中项的value值
		value: {
			type: [Number, String, Array],
			default: ''
		},
		// #endif
		// 菜单项标题
		title: {
			type: [String, Number],
			default: ''
		},
		// 选项数据，如果传入了默认slot，此参数无效
		options: {
			type: Array as any,
			default() {
				return []
			}
		},
		// 是否禁用此菜单项
		disabled: {
			type: Boolean,
			default: false
		},
		// 下拉弹窗的高度
		height: {
			type: [Number, String],
			default: 'auto'
		},
		// 点击遮罩是否可以收起弹窗
		closeOnClickOverlay: {
			type: Boolean,
			default: true
		},
		// 字段映射
		format: {
			type: Object,
			default: () => {
				return {
					label: 'label',
					value: 'value',
				}
			}
		},
		rowInfo: {
			type: Object,
			default: () => {
				let obj = {};
				return obj;
			}
		},
	})
	// 当前项是否处于展开状态
	let active = ref(false);
	// 激活时左边文字和右边对勾图标的颜色
	let activeColor = ref('#2979ff');
	// 未激活时左边文字和右边对勾图标的颜色
	let inactiveColor = ref('#606266');

	// 监听props是否发生了变化，有些值需要传递给父组件m-dropdown，无法双向绑定
	const propsChange = computed(() => {
		return `${props.title}-${props.disabled}`;
	});

	function cellClick() {

	};

	function resetBtn() {

	};

	let parent = ref<any>(null)

	function init() {
		// 获取父组件m-dropdown
		// 获取当前组件实例
		const instance = getCurrentInstance() as any;
		let parentVal = uni.$utils.$parent('m-dropdown');
		if (parentVal) {
			console.log(parentVal);
			parent.value = parentVal

			// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
			activeColor.value = parentVal.props.activeColor;
			inactiveColor.value = parentVal.props.inactiveColor;
			
		}


	}

	watch(propsChange, function (nval) {
		// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
		// 将所有子组件数据重新整理一遍
		// if (parent) parent.init();
	})

	onMounted(() => {
		init();
	})
</script>

<style scoped lang="scss">
	.m-dropdown-item__scroll {
		background: #ffffff;
	}
</style>